Introduction

在 NestJs 有介紹了關於 Guard 搭配 Passport 的使用, 以及建立了整個 Authentication 的範例, 為了實際在前端頁面上正常運作, 所以使用了 ReactJs 來實作相關的功能, 並且分別使用兩種狀態管理的套件來管理取得的 user 狀態:

• Redux Toolkit
• Zustand

以下為實作的功能描述:

• 建立一個 NestJs Server 的前端頁面 (cas-client), 用來提供登入功能, 主要專注在登入成功後跳轉回對應的 web 頁面
• web1 及 web2 皆使用 Vite 來建立 React 專案, 並以 TypeScript 的方式撰寫
• 兩個 client 主要呈現的功能包含:
  • /home: 初始頁面, 並會取得 user 資訊來顯示是否可以進去 /profile 頁面
  • /profile: 有取得 user 的資訊才可進入該頁面, 並顯示 user 的資訊
  • user 相關的 authentication 參考 Guard 的 這篇 及 這篇